<template>
  <div class="select">
    <el-button
      type="primary"
      @click="decreaseCascader"
      :disabled="cascaderCount <= 2"
    >
      -
    </el-button>
    <el-button
      type="primary"
      @click="increaseCascader"
      :disabled="cascaderCount >= 4"
    >
      +
    </el-button>
    <div
      v-for="(n, index) in cascaderCount"
      :key="index"
      class="cascader-container"
    >
      <p>模型{{ index + 1 }}：</p>
      <el-cascader
        v-model="cascaderValues[index]"
        :options="options"
        :props="props"
        @change="handleChange(index)"
      />
    </div>
  </div>
  <div class="cascader-container">
    <p>温度：</p>
    <el-input
      v-model="temperature"
      style="width: 10%"
      type="number"
      :min="0"
      :max="1"
    />
  </div>
  <div class="cascader-container">
    <p>问题：</p>
    <el-input
      v-model="textarea"
      style="width: 30%"
      :autosize="{ minRows: 2, maxRows: 4 }"
      type="textarea"
      placeholder="Please input"
    />
    <el-button type="primary" :icon="Search" @click="submit">Search</el-button>
  </div>
  <div
    v-for="(answer, index) in answers"
    :key="index"
    class="model-answer-container"
  >
    <div class="model-answer">
      模型{{ index + 1 }}回答：
      <div v-html="parse(answer)" class="answer-content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";
import { parse } from "marked";
import { Search } from "@element-plus/icons-vue";
import { max } from "lodash";

const API_URL = "http://127.0.0.1:7878/";
const cascaderCount = ref(2);
const cascaderValues = ref<any[][][]>([]);
const options = ref();
const error = ref("");
const temperature = ref(1);
const textarea = ref("你好");
const answers = ref([]);
const props = {
  expandTrigger: "hover" as const,
};

const fetchModelData = async () => {
  try {
    const response = await axios.post(API_URL + "/get_info");
    if (response.data.code === 200) {
      options.value = JSON.parse(response.data.data);
    } else {
      error.value = response.data.msg;
    }
  } catch (err) {
    error.value = err instanceof Error ? err.message : "problem";
  }
};

const handleChange = (index: number) => {
  console.log(cascaderValues.value[index]);
};

fetchModelData();

const submit = async () => {
  const response = await axios.post(API_URL + "/qa", {
    chosen_model: cascaderValues.value,
    temperature: temperature.value,
    question: textarea.value,
  });
  if (response.data.code === 200) {
    answers.value = response.data.data;
    console.log(answers.value); // 处理返回的数据
  } else {
    error.value = response.data.msg;
  }
};

const increaseCascader = () => {
  if (cascaderCount.value < 4) {
    cascaderCount.value++;
    cascaderValues.value.push([]);
  }
};

const decreaseCascader = () => {
  if (cascaderCount.value > 2) {
    cascaderCount.value--;
    cascaderValues.value.pop();
  }
};
</script>

<style>
.cascader-container {
  display: flex;
  align-items: center;
  margin-right: 10px; /* 或者你希望的间距 */
}
.model-answer-container {
  display: inline-block; /* 使每个模型答案并列显示 */
  border: 1px solid #000; /* 给每个模型答案加一个黑色的边框 */
  padding: 10px; /* 内部填充 */
  margin: 5px; /* 外部间距 */
  border-radius: 5px; /* 边框圆角 */
}

.model-answer {
  margin-bottom: 10px; /* 模型答案之间的间距 */
}

.answer-content {
  /* 这里可以添加更多样式来调整答案内容的外观 */
}
</style>
